<template>
  <div>
    <el-container>
  <el-header class="homeHeader">
    <div class="title">公共文化体育设施系统------政府超级管理员</div>
    <div style="margin-left:auto;min-width: 67px;">
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        {{this.user.username}}<i class="el-icon-s-custom el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
        <el-dropdown-item command="logout">注销登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    </div>
  </el-header>
  <el-container>
    <el-aside width="200px">
      <el-menu @select="menuClick" style="height:100%">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-menu"></i>账户管理</template>
              <el-menu-item index="/zfpuser">普通用户</el-menu-item>
              <el-menu-item index="/zfguser">管理者</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>设施管理</template>
              <el-menu-item index="/zfmangement">管理单位</el-menu-item>
              <el-menu-item index="/zfvenue">场馆</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main style="height:700px">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/zfuserfrist' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
      </el-breadcrumb>
      <router-view/>
    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
export default {

    data () {
      return {
          user: null
      }
    },
    created() {
        this.getUser()
    },
    methods: {
      menuClick(index) {
        this.$router.push(index)
      },

      handleCommand (command) {
        if (command=='logout') {
            this.$confirm('此操作将注销登录, 是否继续?', '提示', {
            confirmButtonTezf: '确定',
            cancelButtonTezf: '取消',
            type: 'warning'
          }).then(() => {
            //注销登录
            this.postRequest('/logout')
            //清空用户信息
            window.sessionStorage.removeItem('tokenStr')
            this.$router.replace('/welcome')
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });          
          });
        }else if (command=='userinfo'){
          this.$router.replace('/zfownuser')
        }
      },

      //获取当前登录用户信息
      getUser() {
        this.getRequest('/user/info').then(resp => {
          this.user = resp
          // console.log(this.user)
        })
      }
    }
}
</script>

<style lang="less" scoped>
  .homeHeader {
      background: rgb(64, 178, 203);
      display: flex;
      align-items: center;
  }

  .el-dropdown-link{
    margin-right: 5px;
  }
  .title {
    min-width: 320px;
  }
</style>>

